<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 600px;
            height: 600px;
            border: 1px solid black;
            position: relative;
            margin: 100px auto;
        }
        #ball{
            width: 20px;
            height: 20px;
            background-color: #E81123;
            border-radius: 50%;
            position: absolute;
            bottom: 40px;
            left: 290px;
        }
        #bat{
            width: 100px;
            height: 30px;
            background-color: #3A96BA;
            position: absolute;
            bottom: 0;
            left:250px;
        }
        #brick div{
            width: 98px;
            height: 18px;
            border: 1px solid black;
            float: left;
        }
    </style>
    <script>
        window.onload = function () {
            var oBall = document.getElementById("ball");
            var oBat = document.getElementById("bat");
            var oBrick = document.getElementById("brick");
            var oBricks = oBrick.getElementsByTagName("div");
            dragX(oBat)
            createBrick(60);
            //睡觉水平方向的运动
            var speedX = parseInt(Math.random() * 4) + 3;
            //随机垂直方向的运动
            var speedY = -parseInt(Math.random() * 3) + 5;

            setInterval(function () {
                oBall.style.left = oBall.offsetLeft + speedX + "px";
                oBall.style.top = oBall.offsetTop + speedY + "px";
                if (oBall.offsetLeft >= 580 || oBall.offsetLeft <= 0){
                    speedX *= -1;    //反过来运动
                }
                if (oBall.offsetTop <= 0){
                    speedY *= -1;
                }
                if (oBall.offsetTop >= 582){
                    oBall.style.display = "none";
                    window.location.reload();
                    alert("GAME OVER")


                }

                //碰撞检测
                if (konck(oBall,oBat)){
                    speedY *= -1;
                }
                for (var i = 0; i < oBricks.length; i++){
                    if (konck(oBricks[i],oBall)){
                        speedY *= -1;
                        oBrick.removeChild(oBricks[i]);
                        break;
                    }
                }

            },30);
        }
        function  dragX(node) {
            node.onmousedown = function (ev) {
                var e = ev || window.event;
                var offsetX = e.clientX - node.offsetLeft;
                document.onmousemove = function (ev) {
                    var e = ev || window.event;
                    var l = e.clientX - offsetX;
                    if (l <= 0){
                        l = 0;
                    }
                    if (l >= 500){
                        l = 500;
                    }
                    node.style.left =  l + "px";
                }
            }
            document.onmouseup = function () {
                document.onmousemove = null;
            }
            // return false;
        }
        //创建砖块
        function createBrick(n) {
            var oBrick = document.getElementById("brick");
            for (var i = 0; i < n; i++){
                var node = document.createElement("div");
                node.style.backgroundColor = randomColor();
                oBrick.appendChild(node);
            }
            var oBricks = oBrick.getElementsByTagName("div");
            for (var i = 0; i < oBricks.length; i++){
                oBricks[i].style.left = oBricks[i].offsetLeft + "px";
                oBricks[i].style.top = oBricks[i].offsetTop + "px";
            }
            for (var i = 0; i < oBricks.length; i++){
                oBricks[i].style.position = "absolute";
            }
        }
        function randomColor() {
            var  str = "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 10) + ')';
            return str;
        }

        //碰撞
        function konck(node1,node2) {
            var l1 = node1.offsetLeft;
            var r1 = node1.offsetLeft + node1.offsetWidth;
            var t1 = node1.offsetTop;
            var b1 = node1.offsetTop + node1.offsetHeight;

            var l2 = node2.offsetLeft;
            var r2 = node2.offsetLeft + node2.offsetWidth;
            var t2 = node2.offsetTop;
            var  b2= node2.offsetTop + node2.offsetHeight;

            if (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1){
                return false;
            }else{
                return true;
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <div id="ball"></div>
        <div id="bat"></div>
        <div id="brick"></div>
    </div>
</body>
</html>